<!--
   弹出层 html、css、js 封装在此同一个模板文件中，模块化管理
 -->

### isAdd 为 true 表示创建角色，为 false 表示修改角色
#set(isAdd = (role == null))

<!-- 弹出层 title -->
<div class="layui-layer-title" style="cursor: move;">
	#(isAdd ? '创建角色' : '修改角色')
</div>

<!-- 弹出层主体内容 -->
<div class="open-box">
	<form id="open-form" action="/admin/role/#(isAdd ? 'save' : 'update')" onsubmit="return false;">
		
		#if( ! isAdd )
			<input type="hidden" name="role.id" value="#(role.id)">
		#end
		
		<div class="form-group d-flex">
			<label class="col-form-label">角色名称</label>
			<div class="flex-grow-1 ml-3">
				<input class="form-control" name="role.name" value="#(role.name??)" type="text" autocomplete="off">
			</div>
		</div>
		
		<div class="form-group d-flex">
			<label class="col-form-label">备注</label>
			<div class="flex-grow-1 ml-3">
				<input class="form-control" name="role.remark" value="#(role.remark??)" type="text" autocomplete="off">
			</div>
		</div>
		
	</form>
</div>

<!-- 弹出层 button -->
<div class="layui-layer-btn" style="padding: 5px 25px 20px 0;">
	<a class="layui-layer-btn0">确定</a>
	<a class="layui-layer-btn1">取消</a>
</div>


<!-- 弹出层样式 -->
<style>
/* 限定左侧 label 宽度，使右侧 input 输入框的宽度保持一致，实现对齐的效果 */
.col-form-label {
	width: 60px;
	text-align: right;
}
</style>


<!-- 弹出层 js 脚本 -->
<script>
	$(function() {
		$('#open-form input:first').focus();
		
		// 绑定提交按钮事件
		$(".layui-layer-btn0").on("click", submitRole);
	});
	
	function submitRole() {
		var $form = $('#open-form');
		var loading = kit.loading('正在处理, 请稍候 .....');
		kit.post($form.attr('action'), $form.serialize(), function(ret) {
			loading.close();		// 关闭 loading 层
			
			if (ret.state == 'ok') {
				layer.closeAll();	// 提交成功关闭 open 弹出层
				kit.fill('/admin/role?pn=#(pn ?? 1)', null, '#content-box');
			}
			kit.msg(ret);
		});
	}
</script>



